
<template>
	<div>
		<bread-crumb>推广关系</bread-crumb>
		<div class="uc-body">
			<!--筛选与排序-->
			<div class="control">
				<div class="search flex flex-ai-c">
					<el-input size="medium" v-model="keyWords" placeholder="请输入钱包地址"></el-input>
					<el-button type="primary" size="medium" round @click="search">搜索</el-button>
					<el-button type="danger" size="medium" round @click="searchClear">刷新</el-button>
				</div>

				<div class="order flex flex-ai-c">
					<el-button
							size="small" :type="sortValue=='money' && sortType=='desc'?'primary':''" @click="getSort('money','desc')"
					>
						挖矿<i class="el-icon-arrow-down"></i>
					</el-button>
					<el-button
							size="small" :type="sortValue=='money' && sortType=='asc'?'primary':''" @click="getSort('money','asc')"
					>
						挖矿<i class="el-icon-arrow-up"></i>
					</el-button>
					<el-button
							size="small" :type="sortValue=='time' && sortType=='desc'?'primary':''" @click="getSort('time','desc')"
					>
						时间<i class="el-icon-arrow-down"></i>
					</el-button>
					<el-button
							size="small" :type="sortValue=='time' && sortType=='asc'?'primary':''" @click="getSort('time','asc')"
					>
						时间<i class="el-icon-arrow-up"></i>
					</el-button>

				</div>
			</div>
			<!--主要元素-->
			<div class="uc-table" v-loading="loading">
				<div class="t-row th">
					<div class="cell">地址</div>
					<div class="cell">挖矿</div>
					<div class="cell">时间</div>
					<div class="cell">操作</div>
				</div>
				<div class="t-row td" v-for="item in tableData" :key="item.address" v-cloak="">
					<div class="cell">{{item.address|token(15)}}</div>
					<div class="cell">{{item.contribution_str}} XG</div>
					<div class="cell">{{item.createTime}}</div>
					<div class="cell">
						<div class="c-green" v-if="item.activeStatus==1">已激活</div>
						<div v-else>
							<el-button type="danger" size="mini" @click="activeUser(item)">激活</el-button>
						</div>
					</div>
				</div>
			</div>
			<!--翻页-->
			<div class="pager">
				<el-pagination
						background layout="prev, pager, next"
						:total="total"
						:pager-count="5"
						:page-sizes="[10, 20, 30, 50]"
						:page-size.sync="pageSizeLocal"
						:current-page.sync="page"
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
				>
				</el-pagination>
			</div>

			<!--复制推广地址-->
			<div class="share-info mt10 line1">
				<div class="tip c-999 mt10">
					1、好友通过分享链接进入游戏界面,自动绑定推荐关系<br />
					2、当只有激活后推广挖矿才会生效
				</div>
				<div class="copyUrl mt10">
					<div class="c-red b">推广地址:</div>
					<span class="copytext" v-cloak="">{{shareUrl}}</span>
					<span class="JS-copy"><i class="c-333 f18 fa fa-copy ml5"></i></span>
				</div>
			</div>
		</div>
	</div>
</template>


<script type="text/javascript">

	/*加载资源*/
	import { mixins } from '@/mixins/mixins' //公共混入
	import { activeRelationToChain, getRelationList } from '@/libs/tron.lib'
	import breadCrumb from '../components/breadCrumb.vue'

	/*公共组件*/


	export default {
		name:'ucIndex',
		components: { breadCrumb },
		mixins:[mixins],
		data () {
			return {

				//控制值
				loading: false,

				//请求到的数据
				tableData: [],

				//请求数据控制
				total: 1, //每次请求返回的数量量
				pageSizeLocal: 10, //本地分页的每页数
				page: 1, //当前第几页
				keyWords:'', //搜索关键字，这里应该是钱包地址,
				sortValue:'money',
				sortType:'asc'
			};
		},
		computed:{
			shareUrl () {
				let shareLink = window.location.origin;
				if (this.tornlinkToken) {
					shareLink = shareLink + "/#/main/farm?code=" + this.tornlinkToken.code;
				}
				return shareLink
			}
		},
		created () {
			this.getTableData(1)
		},
		methods:{

			//请求默认列表数据
			getTableData (page = 1) {
				let that = this;
				that.loading = true

				//注意下面的判断，如果是直接进入本页面，下面的判断会抢在最前面运行，导致无效
				if (that.isLogin) {
					// console.log('调用请求会员下线方法>>>有登录，继续请求')
				}
				//请求
				getRelationList({
					intrAddress: that.sender,
					pageNo     : page,
					pageSize   : that.pageSizeLocal,
					offAddress   : that.keyWords,
					sortValue  : that.sortValue,
					sortType   : that.sortType
				}, (res) => {
					that.tableData = res.datas;
					that.total = res.total;
					that.loading = false;
				});

			},

			//激活
			activeUser (item) {
				let that = this
				this.$notify({
					title: '提示',
					message: '正在处理，请稍后，如果没反应，请重试',
					duration: 2000
				});
				activeRelationToChain(that.sender, item.address, (rsp) => {
					item.activeStatus = 1;
					Swal.fire({
						text: '操作成功',
						type: 'success',
						confirmButtonText: '確定'
					})
				});

			},

			//搜索
			search () {
				if (this.keyWords.length > 2) {
					this.keyWords = String.prototype.trim.call(this.keyWords)
					this.page = 1 //重置为第一页
					this.getTableData(1)
				} else {
					this.$message.error('请输入至少3个字符')
				}
			},

			//清空搜索
			searchClear () {
				this.keyWords = ''
				this.getTableData(1)
			},

			//排序
			getSort (field,sortType) {
				this.sortValue = field
				this.sortType  = sortType
				this.getTableData()
			},


			//改变每页数量
			handleSizeChange (val) {
				console.log(`每页 ${val} 条`);
			},
			//跳转页码
			handleCurrentChange (val) {
				console.log('翻页：' + val)
				this.getTableData(val)
			}
		},
		watch:{
			sender: {
				handler (nv, ov) {
					console.log('监视到sender改变,重新加载数据')
					this.getTableData()
				},
				deep: false,
				immediate: false
			}
		},
		filters: {
			token (t, splic = 4) {
				return t.slice(0, splic) + '...' + t.slice(-splic)
			}
		}
	};
</script>


<style lang="less" scoped>

	/*公共变量*/
	@import '~@/assets/global.less';

	/*排序与筛选*/
	.control{
		display: flex;justify-content: space-between;

	}

	/*用户中心表格*/
	.uc-table {color:#7f8eab;margin-top: 0px;}
	.uc-table .th,.uc-table .td {/*统一设置*/
		font-size:14px;padding:10px;border-bottom:1px solid #efefef;
		display:flex;align-items: center;justify-content: space-between;
	}
	.uc-table .th {font-size: 14px;font-weight: bold;}
	.uc-table .th .cell{}
	.uc-table .td {}
	.uc-table .td .cell{}
	.uc-table .t-row .cell {}
	.uc-table .t-row .cell:nth-child(1){flex:5}
	.uc-table .t-row .cell:nth-child(2){flex:2}
	.uc-table .t-row .cell:nth-child(3){flex:2}
	.uc-table .t-row .cell:nth-child(4){flex:1}

	/**********************适应************************/
	@media screen and (max-width: @MINSCREEN){

		/*排序与筛选*/
		.control{
			display: block;
			.control{}
			.order{margin-top: 5px;}
		}

		.uc-table .th{display: none!important;}
		.uc-table .t-row{display: block;padding:10px 0px;}
		.uc-table .t-row .cell{width: 100% !important;font-size:14px;}
		.uc-table .t-row .cell:nth-child(2):before{content:'挖矿：'}
		.uc-table .t-row .cell:nth-child(3):before{content:'时间：'}

	}
</style>
